<template>
  <div class="follow_page">
    <el-scrollbar class="el_scroll">
      <!-- 跟进信息输入 开始 -->
      <div class="textarea_box">
        <span>跟进方式：</span>
        <div class="">
          <el-radio-group v-model="followType" class="el_radio_group wx_radio_group">
            <el-radio label="0">电话</el-radio>
            <el-radio label="1">微信</el-radio>
          </el-radio-group>
        </div>
        <span class="ml30">跟进情况：</span>
        <div class="area_box">
          <el-input type="textarea" v-model="searchText" resize="none" rows="4"></el-input>
        </div>
        <template v-if="showOverdueDays()">
          <span>下次跟进：</span>
          <div>
            <el-radio-group v-model="overdueDays" class="el_radio_group">
              <el-radio v-for="(item,index) in overDayList" :key="index" :label="item.id">{{item.name}}</el-radio>
            </el-radio-group>
            <el-date-picker v-model="followDate" :picker-options="pickerOptions" v-if="overdueDays == 999" size="mini" type="date" class="el_date_picker" placeholder="选择日期" value-format="yyyy-MM-dd">
            </el-date-picker>
          </div>
        </template>
        <el-button type="primary" @click="sendFollow" :disabled="isHasClick()">发布跟进记录</el-button>
      </div>
      <!-- 跟进信息输入 end -->

      <!-- 跟进记录列表 开始 -->
      <div class="follow_list">

        <div class="cell" v-for="(item,index) in followUpList" :key="index">
          <div class="title">
            <span class="name">{{item.principal}}</span>
            <span class="time">{{item.issueTime}}</span>
            <span>发布跟进记录：</span>
          </div>
          <div class="txt_content">
            {{item.type == 0 ?'电话：':'微信：'}}{{item.issueContent}}
          </div>
        </div>

      </div>
      <!-- 跟进记录列表 end -->
    </el-scrollbar>
  </div>
</template>
<script>
import { GETCUSTOMERFOLLOWUPS, ADDFOLLOWUPINFO } from "@/http/customer";
import { showToast } from "@/common/util";
import moment from "moment";
export default {
  name: "FollowInfo",
  props: {
    userInfo: {
      type: Object,
      default: function () {
        return {};
      },
    },
  },
  watch: {
    userInfo: {
      handler: function (e) {
        // if (e.followUpList) {
        //   this.followUpList = e.followUpList;
        // }
      },
      immediate: true,
    },
  },
  data() {
    return {
      followUpList: [],
      searchText: "",
      followType: "0",
      overdueDays: 999,
      overDayList: [
        { name: "明天内", id: 1 },
        { name: "后天内", id: 2 },
        { name: "3天内", id: 3 },
        // { name: "4天内", id: 4 },
        { name: "5天内", id: 5 },
        { name: "7天内", id: 7 },
        { name: "自定义", id: 999 },
        // { name: "8天内", id: 8 },
        // { name: "9天内", id: 9 },
        // { name: "10天内", id: 10 },
      ],
      followDate: "",
      pickerOptions: {
        disabledDate: function (time) {
          let now = moment().format("x");
          let max = moment().add(30, "days").format("x");
          let p = moment(time).format("x");
          return p < now || p > max;
        },
      },
    };
  },
  mounted() {
    this.getList();
  },
  methods: {
    // 获取列表
    getList(id) {
      let oParams = {};
      oParams.clueId = this.userInfo.id;
      GETCUSTOMERFOLLOWUPS(oParams).then((res) => {
        this.followUpList = res.data || [];
      });
    },
    // 发布跟进记录
    sendFollow() {
      let _this = this;
      let oParams = {};
      let user = this.userInfo;
      oParams.clueId = this.userInfo.id;
      oParams.issueContent = this.searchText;
      oParams.type = this.followType;

      // 待联系、待预约、未成交 需要增加下次跟进时间
      if (_this.showOverdueDays()) {
        if (_this.overdueDays == 999) {
          oParams.followDate = this.followDate;
        } else {
          oParams.overdueDays = this.overdueDays;
        }
      }
      ADDFOLLOWUPINFO(oParams).then((res) => {
        if (res.code == 200) {
          showToast({
            message: "发布成功",
            type: "success",
          });
          _this.searchText = "";
          _this.getList();
        }
      });
    },

    // 是否展示下次跟进时间
    showOverdueDays() {
      let user = this.userInfo || {};
      let base = user.baseInfo || {};
      if (user.status != 1 && user.status != 2 && user.status != 7) {
        return false;
      }

      if (
        base.markTag == 2 ||
        base.markTag == 3 ||
        base.markTag == 4 ||
        base.markTag == 5
      ) {
        return false;
      }
      return true;
    },

    // 是否置灰
    isHasClick() {
      let n = this.showOverdueDays();
      if (!this.searchText) {
        return true;
      }

      if (n && !this.overdueDays) {
        return true;
      }
      return false;
    },
  },
};
</script>
<style lang="scss">
.el_scroll {
  .el-scrollbar__wrap {
    height: 100vh;
    overflow-x: hidden;
  }
}
</style>
<style lang="scss" scoped>
.ml30 {
  margin-left: 30px;
}
.follow_page {
  min-height: 360px;
}
.textarea_box {
  display: flex;
  align-items: flex-start;
  // min-height: 360px;
  .area_box {
    flex: 1;
    padding-right: 30px;
  }
}
.follow_list {
  .cell {
    position: relative;
    padding: 10px 0;
    margin: 10px 0;
    .title {
      display: flex;
      align-items: flex-end;
      font-size: 12px;
      color: #999;
      span {
        margin-right: 10px;
      }
      .name {
        font-size: 14px;
        color: #333;
        font-weight: bold;
      }
    }
    .txt_content {
      padding: 10px 0;
      // background:#f2f2f2;
      // border-radius:4px;
      font-size: 14px;
      color: #333;
    }
  }
  .cell:after {
    display: block;
    content: "";
    position: absolute;
    height: 1px;
    left: 0;
    right: 0;
    bottom: 0;
    background: #d8d8d8;
    transform: translateY(0.5);
    opacity: 0.4;
  }
  .cell:last-child:after {
    display: none;
  }
}
.el_radio_group {
  width: 200px;
  display: flex;
  flex-wrap: wrap;
  .el-radio {
    flex: 0 0 50%;
    margin: 0 0 10px 0;
  }
}
.wx_radio_group {
  width: 60px;
  .el-radio {
    flex: 0 0 100%;
  }
}
.el_date_picker {
  width: 160px;
}
</style>